import React, { useState, useEffect } from 'react';
// useEffect
// 用来模拟类组件的生命周期的, 使函数组件具有类似的生命周期特征
// 语法结构: useEffect(()=>{},[])
// 参数1:为函数
// 参数2:为数组


const Useeffect = () => {
    const [count, setCount] = useState(0);
    const handleFn = () => {
        console.log('页面点击事件');
    }

    const [userinfo, setuserinfo] = useState({ name: '孙君', say: '不重要' })
    const edituser = () => {
        setuserinfo({
            ...userinfo,
            say: '重要'
        })
    }

    // 第一种写法
    // useEffect(() => {
    //     console.log('初始化') // 初始化执行, 数据更新执行  相当于=> componentDidMount+componentDidUpdate
    // })

    // 第二种写法(参数1函数还有返回值,返回值还是一个函数)
    // useEffect(() => {
    //     console.log('初始化')  // 初始化执行,数据更新执行 相当于=> componentDidMount+componentDidUpdate
    //     // 初始化给页面中的标签绑定一个事件
    //     // document.addEventListener('click', handleFn, false)
    //     document.querySelector('button').addEventListener('click', handleFn, false)
    //     return () => {
    //         console.log(count) // 初始化不执行, 数据更新前执行  相当于 componentWillUnmont
    //         // 数据更新时,先清除事件绑定,
    //         document.querySelector('button').removeEventListener('click', handleFn, false)
    //     }
    // })

    // 第三种写法: 参数2 为空数组情形, 空数组中没有依赖项
    // useEffect(() => {
    //     console.log('初始化'); // 初始化执行只执行一次 相当于 componnetDidMount
    //     // 一般发起数据请求
    // }, [])


    // 第四种写法 参数2 数组中有依赖项,数组可以存放多个依赖
    // 注意: 只有参数2中依赖的项发生改变的时候, 才去执行return 返回的函数和再次执行初始化, 监听依赖项的变化

    useEffect(() => {
        console.log('初始化');  // 初始化执行 . 数据更新后执行
        // return () => {
        //     console.log(count); // 数据更新前执行
        // }
    }, [count, userinfo])


    return (
        <div>
            {/* 使用count */}
            <p onClick={() => setCount(count + 1)}>count:{count}</p>
            <p><button>点击按钮</button></p>
            <hr />
            <p onClick={() => edituser()}>{userinfo.name}--{userinfo.say}</p>
        </div>
    );
}

export default Useeffect;
